.usercenter {
	.uc-head {
		min-height: 24rem;
		position: relative;
		> img {
			width: 100%;
			display: block;
		}
		> a {
			position: absolute;

			font-size: 1.75rem;
			color: #fccc5b;
			cursor: pointer;
			&.link-security {
				right: 1.5rem;
				top: 1rem;
			}
			&.link-follow {
				left: 1.5rem;
				top: 2rem;
			}
		}
		> p {
			position: absolute;
			right: 1.5rem;
			top: 2.6rem;
			font-size: 1.75rem;
			line-height: 1.5rem;
			color: #fccc5b;
			cursor: pointer;
			img {
				height: 1.5rem;
				vertical-align: top;
				margin-left: 0.5rem;
			}
		}
		.uc-info-card {
			width: 100%;
			position: absolute;
			z-index: 2;
			left: 0;
			top: 2rem;
			padding: 6.8% 1.5rem 1.5rem 1.5rem;
			.uc-info-name {
				float: left;
				color: #fff;
				font-size: 2.25rem;
				font-weight: bold;
				flex-grow: 1;
				align-items: center;
				padding-left: 1.5rem;
			}
			.uc-info-card-top {
				// min-height: 8rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.uc-info-header {
					width: 9.375rem;
					height: 9.375rem;
					position: relative;
					img {
						width: 9.375rem;
						height: 9.375rem;
						border-radius: 50%;
					}
				}
				.uc-info-level {
					h3 {
						font-size: 2.25rem;
						height: 2.25rem;
						line-height: 2.25rem;
						margin-bottom: 1rem;
						span{
							background: rgba(252,204,91,0.2);
							border-radius:1rem;
							font-size: 1.25rem;
							line-height: 2rem;
							padding:0.2rem 1rem;
							color:#fccc5b;
							margin-left: 0.5rem;
						}
					}
					.growth{
						margin-top: 0.5rem;
						margin-bottom:1.5rem;
						.progress{
							width: 15rem;
							height: 0.3rem;
							border-radius:0.15rem;
							background: rgba(252,204,91,0.3);
							span{
								border-radius:0.15rem;
								display: block;
								height: 0.3rem;
								background: #fccc5b;
								width: 0;
							}
						}
						p{
							font-size: 1rem;
							color:#fff;
							margin-top: 0.5rem;
						}
					}
				}
				.uc-info-amount {
					text-align: right;
					h4 {
						font-size: 1.5rem;
						height: 2.25rem;
						line-height: 2.25rem;
						color: #fff;
						font-weight: normal;
						span{
							display: inline-block;
						}
						img {
							height: 1.25rem;
							margin-right: 0.625rem;
							vertical-align: baseline;
						}
					}
					.amount-number{
						font-size: 2.25rem;
						color: #FCCC5B;
						margin-bottom: 1rem;
					}
				}
			}
			.uc-info-card-bottom {
				text-align: center;
				display: flex;
				margin:0 -1.5rem;
				margin-top:2rem;
				>div{
					flex: 1;
					padding: 0 1.5rem;
				}
				img{
					display: block;
					margin:0 auto;
					height: 3rem;
					margin-bottom: 0.5rem;
				}
				span{
					color:#fff;
					font-size: 1.5rem;
					line-height:1.8rem;
					display: block;
				}
			}
		}
	}
	.uc-info {
		padding: 3rem 1.5rem;
		background: #000;
		.uc-info-address {
			> div {
				background: linear-gradient(0deg, rgba(247, 206, 112, 1), rgba(255, 221, 145, 1));
				box-shadow: -0.375rem 0px 1rem 0px rgba(135, 135, 135, 0.1);
				border-radius: 0.75rem;
				padding: 2.5rem 1.5rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				img {
					width: 2.8125rem;
					height: 2.6875rem;
					margin-right: 0.5rem;
				}
				p {
					font-size: 1.875rem;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				a {
					white-space: nowrap;
					color: #333;
					border-radius: 1.4rem;
					font-size: 1.875rem;
					padding: 0.1rem 0.5rem;
				}
			}
		}
	}
	.uc-list {
		.uc-list-head {
			font-size: 2.25rem;
			line-height: 5rem;
			display: flex;
			background: #000;
			padding-top: 1.5rem;
			a {
				display: block;
				width: 50%;
				text-align: center;
				color: #fccc5b;
				position: relative;
				font-weight: normal;
				&.active {
					color: #fccc5b;
					font-weight: bold;
					&:after {
						content: '';
						width: 3rem;
						height: 0.25rem;
						border-radius: 0.1rem;
						background: #fccc5b;
						position: absolute;
						left: 50%;
						bottom: 0;
						margin-left: -1.5rem;
					}
				}
			}
		}
		.uc-list-body {
			padding: 0 1.5rem;
		}
	}
}
.order-list {
	padding-bottom: 1.5rem;
	li {
		list-style-type: none;
		padding: 0;
		margin: 0;
		padding-top: 2rem;
		text-align: left;
		&.nodata {
			text-align: center;
			padding-top: 4rem;
			padding-bottom: 2rem;
			img {
				width: 55%;
			}
			p {
				font-size: 1.875rem;
			}
		}
		.order-list-title {
			font-size: 1.875rem;
			color: #fff;
			margin-bottom: 1.5rem;
		}
		.order-list-info {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 1rem;
			padding: 1.5rem;
			overflow: hidden;
			position: relative;
			.order-list-no {
				margin-bottom: 1.5rem;
				color: #fff;
				font-size: 1.5rem;
				span {
					float: right;
				}
			}
			> img {
				float: left;
				width: 24.75%;
				margin-right: 1.5rem;
				border-radius: 1rem;
			}
			p {
				font-size: 1.875rem;
				line-height: 3.5rem;
				&.orange {
					color: #ff6e6e;
				}
				&.green {
					color: #4adcaa;
				}
				&.red {
					color: #fa3300;
				}
				&.gray {
					color: #aaa;
				}
			}
			h3 {
				font-size: 2.25rem;
				span {
					margin-right: 3rem;
				}
			}
			.order-list-btn {
				position: absolute;
				bottom: 1.5rem;
				right: 1.5rem;
				a {
					display: inline-block;
					font-size: 1.875rem;
					height: 3.375rem;
					line-height: 3.375rem;
					padding: 0 2rem;
					margin-left: 1.5rem;
					border-radius: 1.7rem;
					&.pay-btn {
						background: #ff6e6e;
						color: #fff;
						border: 1px solid #ff6e6e;
						&:active {
							background: darken(#ff6e6e, 10%);
							border-color: darken(#ff6e6e, 10%);
						}
					}
					&.cancel-btn {
						color: #cccccc;
						border: 1px solid #cccccc;
						&:active {
							background: #eee;
							border-color: darken(#cccccc, 10%);
						}
					}
				}
			}
		}
	}
}
.log-list {
	padding-bottom: 1.5rem;
	li {
		list-style-type: none;
		padding: 0;
		margin: 0;
		padding-top: 2rem;
		text-align: left;
		&.nodata {
			text-align: center;
			padding-top: 4rem;
			padding-bottom: 2rem;
			img {
				width: 55%;
			}
			p {
				font-size: 1.875rem;
			}
		}
		.log-list-title {
			font-size: 1.875rem;
			color: #fff;
		}
		.log-list-info {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 1rem;
			padding: 1.5rem;
			overflow: hidden;
			position: relative;
			margin-top: 1.5rem;
			.log-list-no {
				margin-bottom: 1.5rem;
				color: #fff;
				font-size: 1.5rem;
				span {
					float: right;
				}
			}
			.log-list-info-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				p {
					font-size: 1.875rem;
				}
				h3 {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					> img {
						width: 20%;
						margin-right: 1.5rem;
						border-radius: 50%;
					}
					font-size: 2.25rem;
					color: #f9cd6c;
				}
			}
		}
	}
}

.copy-address {
	width: 90%;
	background: #313539;
	border-radius: 1rem;
	padding: 2.9375rem 2.9375rem 4rem 2.9375rem;
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	.qrcode {
		width: 100%;
		position: relative;
		img {
			width: 100%;
			display: block;
		}
		.border-left {
			position: absolute;
			display: block;
			background: #313539;
			width: 9%;
			left: 0;
			top: 0;
			height: 100%;
		}
		.border-right {
			position: absolute;
			display: block;
			background: #313539;
			width: 9%;
			right: 0;
			top: 0;
			height: 100%;
		}
		.border-top {
			position: absolute;
			display: block;
			background: #313539;
			width: 100%;
			right: 0;
			top: -1px;
			height: 9%;
		}
		.border-bottom {
			position: absolute;
			display: block;
			background: #313539;
			width: 100%;
			right: 0;
			bottom: -1px;
			height: 9%;
		}
	}
	.icon-close {
		font-size: 2rem;
		color: #999;
		position: absolute;
		right: 2.5rem;
		top: 1rem;
		font-style: normal;
		line-height: 4rem;
		display: block;
		width: 2rem;
		height: 2rem;
		text-align: center;
		z-index: 99;
		&:active {
			color: #fccc5b;
		}
	}
	.address {
		text-align: center;
		p {
			text-align: center;
			font-size: 1.875rem;
			color: #c5cbd0;
			input {
				border: none;
				background: none;
				font-size: 1.875rem;
				color: #c5cbd0;
			}
		}
		a {
			font-size: 1.875rem;
			text-decoration: underline;
			color: #fccc5b;
		}
	}
}
.help-text{
	font-size: 1.25rem;
	color: #838282;
	padding-left: 1.5rem;
	background: url(../../assets/images/usercenter/question.png) left center no-repeat;
	background-size:1.25rem auto;
	a{
		color: #838282;
	}
}

.pay-sure-box{
	width: 90%;
	left: 5%;
	top: 50%;
	padding:3rem;
	position: absolute;
	transform: translateY(-50%);
	background: #313539;
	border-radius:1rem;
	.icon-warn{
		width: 8.5625rem;
		height: 8.5625rem;
		display: block;
		margin:0 auto;
	}
	.icon-close{
		color: #999;
		position: absolute;
		right: 1rem;
		top: 1rem;
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		text-align: center;
		background: url(../../assets/icons/icon-close.png) center center no-repeat;
		background-size:100%;
	}
	h3{
		font-size: 2rem;
		color: #fff;
		margin-bottom: 3rem;
		text-align: center;
		font-weight: normal;
	}
	img{
		width: 70%;
		display: block;
		margin:2rem auto;
		background: none;
	}
	span{
		color: #FCCC5B;
		font-size: 1.875rem;
	}
	.user-amount{
		font-size: 3rem;
		color: #FCCC5B;
		text-align: center;
		margin: 2rem 0;
	}
	.btn-box{
		text-align: center;
		margin-top: 5rem;
		button{
			margin:0 1rem;
			width:40%;
			display: inline-block;
			&:active{
				background:#daaa39;
			}
		}
	}
	
	p{
		font-size: 2rem;
		margin-top: 1rem;
		// text-align: center;
	}
}